<template>
	<view class="page-make-photo">
		<view class="photo-suggestions flex-start-center">
			<image class="photo-icon" src="/static/other/photo-suggestions.png" mode="widthFix"></image>
			<text class="photo-suggestions-text">拍照建议</text>
		</view>
		<view class="swiper-wrap">
			<uni-swiper-dot class="swiper_dot" :info="pictures" :dotsStyles="{
				backgroundColor: '#ffffff',
				selectedBackgroundColor: '#ffffff',
				selectedBorder: 'none',
				border: 'none',
				bottom: 8,
			}" :current="swiperCurrent" mode="round" @clickItem="clickItem">
				<swiper class="swiper" :current="swiperCurrent" :autoplay="true" :circular="true" :interval="3000" @change="swiperCurrentChange">
					<swiper-item v-for="item in pictures" :key="item.id">
						<image :src="item.url"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>

		</view>
		<view class="product-name">{{ detailInfo.name }} </view>
		<view class="product-support flex-start-center">
			<view v-if="couldSavePhoto" class="product-support-item  flex-start-center">
				<image class="support-icon" src="/static/other/support2.png"></image>
				<text>支持保存电子档</text>
			</view>
			<!-- #ifndef MP-TOUTIAO -->
				<view v-if="couldPrint" class="product-support-item flex-start-center">
					<image class="support-icon" src="/static/other/support2.png"></image>
					<text>支持冲印邮寄</text>
				</view>
			<!-- #endif -->
		</view>
		<view class="split-line"></view>
		<view class="detail-info">
			<view v-if="busiType === 'photo-print-credit'" class="detail-item">
				<view class="detail-item-title">选择套餐</view>
				<view class="detail-item-content">{{ getBackGroundText(creditPrintData.background) }}</view>
			</view>
			<view class="detail-item">
				<view class="detail-item-title">像素大小</view>
				<view class="detail-item-content">{{ detailInfo.widthPixel }} * {{ detailInfo.heightPixel }} px</view>
			</view>
			<view class="detail-item">
				<view class="detail-item-title">冲印尺寸</view>
				<view class="detail-item-content">{{ detailInfo.width }}*{{ detailInfo.height }} mm</view>
			</view>
			<view class="detail-item">
				<view class="detail-item-title">分辨率</view>
				<view class="detail-item-content">{{ detailInfo.dpi }}DPI</view>
			</view>
			<view class="detail-item">
				<view class="detail-item-title">文件大小</view>
				<view class="detail-item-content">{{ detailInfo.minSize }}-{{ detailInfo.maxSize }}KB</view>
			</view>

			<view v-if="busiType !== 'photo-print-credit'" class="detail-item">
				<view class="detail-item-title">背景</view>
				<view class="detail-item-content">
					<view class="background-list">
						<view class="background-item" :style="{ background: item.background }" v-for="item in backColorList"
							:key="item.id">
						</view>
					</view>

				</view>
			</view>
			<view class="detail-item">
				<view class="detail-item-title">其他要求</view>
				<view class="detail-item-content">{{ detailInfo.remark || '仅提供电子版，请勿上传带水印照片和预览截图，以及翻拍照片' }}</view>
			</view>
		</view>


	</view>
	<view class="fixed-bottom-btn">
		<view class="btn-double">
			<view class="custom-button full-button" @tap="onChoosePhoto">
				<u-button type="primary" shape="circle" text="相册选择"></u-button>
			</view>
			<view class="custom-button full-button" @tap="onCamera">
				<u-button type="primary" shape="circle" text="直接拍摄"></u-button>
			</view>
		</view>
	</view>
	<!--
		@devicePosition: 摄像头位置  前置或后置摄像头，值为front, bac
		@quality: 成像质量，值为high（高质量）、normal（普通质量）、low（低质量）
	-->
	<bow-camera
		v-if="showCamera"
		devicePosition="front"
		quality="normal"
		@chooseImage="chooseImage"
		@confirmPhoto="confirmPhoto"
	></bow-camera>
</template>

<script setup>
import {
	ref,
	reactive,
	computed,
} from "vue";
import {
	onLoad
} from '@dcloudio/uni-app';
import {
	backColorList,
	getBackGroundText,
} from '@/common/js/data.js';
import {
	uploadFile,
	getImageInfo,
} from '@/common/js/method.js';
import bowCamera from '@/uni_modules/bow-camera/components/bow-camera/bow-camera.vue';

const busiType = ref('make-photo'); //页面业务类型，make-photo：证件照制作 、custom：自定义照片、photo-print-credit：证件照打印
const swiperCurrent = ref(0);


const pictures = [{
	id: '1',
	url: "https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/detail1.png"
}, {
	id: '2',
	url: "https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/detail2.png"
}, {
	id: '3',
	url: "https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/detail3.png"
}, {
	id: '4',
	url: "https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/detail4.png"
}, {
	id: '5',
	url: "https://sspzjz.oss-cn-shanghai.aliyuncs.com/swiper/detail5.png"
}];

const detailInfo = ref({});
const creditPrintData = ref({});

// 是否支持保存电子照
const couldSavePhoto = computed(() => {
	// 照片打印不支持保存电子照
	return busiType.value !== 'photo-print-credit';
});
// 是否支持冲印邮寄
const couldPrint = computed(() => {
	// 自定义照片不支持冲印邮寄
	if (busiType.value === 'custom') {
		return false;
	} else if (busiType.value === 'make-photo') { //证件照制作，根据post判断，为0不可邮寄
		return detailInfo.value.post !== 0;
	}
	return true;
});

const getDetail = async (id) => {
	let res = await uni.$request('/api/busi/product/select/byId', {
		id
	});
	detailInfo.value = res.data.product;
}
function swiperCurrentChange(e) {
	swiperCurrent.value = e.target.current;
}
function clickItem(e) {
	swiperCurrent.value = e;
}


onLoad((params) => {
	// 设置当前页面业务类型为传入的
	if (params.type) {
		busiType.value = params.type;
		// 自定义照片
		if (params.type === 'custom') {
			detailInfo.value = JSON.parse(params.data);
			// 证件照打印功能（选择套餐后进入）
		} else if (params.type === "photo-print-credit") {
			const data = JSON.parse(params.data);
			creditPrintData.value = data;
			getDetail(+data.id);
		}
	} else { //默认：内置产品-证件照制作
		getDetail(+params.id);
	}

})

// 证件照环境检测接口
const checkFunc = async (onlineUrl) => {
	await uni.$request('/api/busi/photo/check', {
		specId: detailInfo.value.specId,
		imageUrl: onlineUrl,
	}, {
		hideLoading: true
	});
}


const getParams = (onlineUrl) => {
	const {
		width,
		height,
		widthPixel,
		heightPixel,
		minSize,
		maxSize,
		dpi,
		name,
		specId, //证件照制作相关接口的id
		id, //产品id
		printNum,
	} = detailInfo.value;
	let data;
	switch (busiType.value) {
		// 自定义照片
		case 'custom':
			data = {
				name: '自定义照',
				id: 12,
				width,
				height,
				widthPixel,
				heightPixel,
				minSize,
				maxSize,
				dpi,
				photoUrl: encodeURIComponent(onlineUrl),
			}
			break;
		// 证件照打印
		case 'photo-print-credit':
			data = {
				id,
				specId,
				name,
				width,
				height,
				widthPixel,
				heightPixel,
				minSize,
				maxSize,
				dpi,
				photoUrl: encodeURIComponent(onlineUrl),
				printNum,
				background: creditPrintData.value.background,
			}
			break;
		default: //证件照制作
			data = {
				id,
				specId,
				name,
				width,
				height,
				widthPixel,
				heightPixel,
				minSize,
				maxSize,
				dpi,
				printNum,
				photoUrl: encodeURIComponent(onlineUrl),
				couldPrint: couldPrint.value,
			};
			break;
	}

	return data;
};

const toOperator = (onlineUrl) => {
	const data = getParams(onlineUrl);
	uni.navigateTo({
		url: `/pages/make-photo/make-photo-operator?type=${busiType.value}&data=${JSON.stringify(data)}`,
	})
}

const uploadImage = async (photoUrl) => {
	const limitWidth = 2000;
	const limitHeight = 2000;
	const {
		width,
		height,
	} = await getImageInfo(photoUrl);
	if (width > limitWidth) {
		uni.$u.toast(`图片宽度过大，不能超过${limitWidth}px`);
		return;
	}
	if (height > limitHeight) {
		uni.$u.toast(`图片高度过大，不能超过${limitHeight}px`);
		return;
	}
	uni.showLoading({
		title: '检测中'
	});
	let onlineUrl = await uploadFile(photoUrl);
	// 检测环境
	await checkFunc(onlineUrl);
	uni.hideLoading();
	toOperator(onlineUrl)
};



const onChoosePhoto = () => {
	uni.chooseImage({
		count: 1, //默认9
		sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album'], //从相册选择
		success: function (res) {
			// console.log(res.tempFilePaths);
			const photoUrl = res.tempFilePaths[0];
			uploadImage(photoUrl);
		}
	});
};
const showCamera = ref(false);
const onCamera = () => {
	console.log(uni.getSystemInfoSync().uniPlatform)
	switch (uni.getSystemInfoSync().uniPlatform) {
		case 'mp-weixin':
			showCamera.value = true;
			break;
		default:
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera'], //拍照
				success: function (res) {
					// console.log(res);
					const photoUrl = res.tempFilePaths[0];
					uploadImage(photoUrl);
				}
			});
			break;
	}
};

const  confirmPhoto = (filePath) => {
	console.log('拍摄的图片: ' + filePath);
	showCamera.value = false;
	uploadImage(filePath);
}
const  chooseImage = (filePath) => {
	showCamera.value = false;
	console.log('选择的相册图片: ' + filePath);
	uploadImage(filePath);
}
 
</script>

<style lang="less" scoped>
.page-make-photo {
	box-sizing: border-box;
	background: #fff;
	padding: 20rpx 32rpx 232rpx 32rpx;
	
	.photo-suggestions {
		gap: 10rpx;
		margin-bottom: 20px;
	}

	.photo-icon {
		width: 24px;
		height: 24px;
	}

	.photo-suggestions-text {
		font-size: 16px;
		font-weight: 500;
		line-height: 24px;
		color: rgba(56, 56, 56, 1);
	}


	.swiper-wrap {
		box-sizing: border-box;

		.swiper,
		.swiper image {
			width: 100%;
			height: 386rpx;
		}
	}

	.product-name {
		padding: 20px 0;
	}

	.product-support {
		gap: 20px;
		margin-bottom: 20px;

		.product-support-item {
			gap: 6px;
			font-size: 12px;
			line-height: 18px;
			color: rgba(166, 166, 166, 1);
		}

		.support-icon {
			width: 14px;
			height: 14px;
		}
	}

	.detail-info {
		margin-top: 20px;
		// margin-bottom: 70px;
		display: flex;
		flex-direction: column;
		gap: 12px;

		.detail-item {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 22px;
		}

		.detail-item-title {
			color: rgba(56, 56, 56, 1);

		}

		.detail-item-content {
			color: rgba(166, 166, 166, 1);
			width: 214px;
			text-align: right;
		}
	}

	.background-list {
		gap: 10px;
		display: flex;
		justify-content: flex-end;
		padding: 3px 0;

		.background-item {
			height: 16px;
			width: 16px;
			border-radius: 100%;
			border: 1px solid rgba(229, 229, 229, 1);
		}
	}

}
</style>